<template>
  <view
    class="container999"
  >
    <view class="nav">
      <navTab ref="navTab" :tabTitle="tabTitle" @changeTab="changeTab"></navTab>
    </view>
    <!-- swiper切换 swiper-item表示一页 scroll-view表示滚动视窗 -->

    <swiper style="min-height: 100vh;" :current="currentTab" @change="swiperTab">
      <swiper-item v-for="(listItem,listIndex) in list" :key="listIndex" class>
		<view class="guess-section">
				<view v-for="(item, index) in listItem" :key="index" class="guess-item"  @click="navToDetailPage({ id: item.id })">
					<view class="image-wrapper"><image :src="item.src" mode="aspectFill"></image></view>
					<text class="title clamp">{{item.title}}</text>
					<text class="price">￥{{item.price}}</text>
				</view>
			</view>

        <!-- <view
          class="card"
          v-for="(item,index) in listItem"
          :key="index"
        >
          <view class="image-wrapper">
            <image src="https://ss2.bdstatic.com/8_V1bjqh_Q23odCf/pacific/1854679775.png" mode="aspectFill"></image>
          </view>
          <text class="title clamp">{{item}}电动车</text>
          <text class="price">{{item}}100￥</text>
        </view> -->

        <view class="noCard" v-if="listItem.length===0">暂无信息</view>
      </swiper-item>
    </swiper>
  </view>
</template>

<script>
const util = require("@/util/util.js");
import navTab from "@/components/navTab.vue";
import { mapActions,mapMutations } from 'vuex';
export default {
  components: { navTab },
  data() {
    return {
      tabTitle: ["电动车", "电瓶", "头盔", "雨衣"], //导航栏格式 --导航栏组件
      currentTab: 0, //sweiper所在页
    //   pages: [1, 1, 1, 1], //第几个swiper的第几页
      list: [[1, 2,3,4], ["a", "b",'c','d'], [], ["2233", "4234"]] //数据格式
    };
  },
	created() {
this.SelectionDATA()
	},
  onShow() {},
  onHide() {},
  methods: {
	 ...mapActions(['getSelection','locateGoods']),
	 ...mapMutations(['navToDetailPage']),
    changeTab(index) {
      this.currentTab = index;
	},
	//获取分类精选
	SelectionDATA(){
		let data = {'name':"H5_HOME_CLLSS"}
		this.getSelection({data})
		.then(res=>{
			this.tabTitle = res.tabTitle
			this.list = res.list
		})
	},
    // 点击反馈事件
    conClick(e) {
      this.$refs.clickCircle.conClick(e);
    },
    // swiper 滑动
    swiperTab: function(e) {
      var index = e.detail.current; //获取索引
      if (this.tabTitle.length <= 5) {
        this.$refs.navTab.navClick(index);
      } else {
        this.$refs.navTab.longClick(index);
      }
    },
    // 加载更多 util.throttle为防抖函数
    // 刷新touch监听
    refreshStart(e) {
      this.$refs.refresh.refreshStart(e);
    },
    refreshMove(e) {
      this.$refs.refresh.refreshMove(e);
    },
    refreshEnd(e) {
      this.$refs.refresh.refreshEnd(e);
    }
  }
};
</script>

<style lang="scss">
.container999 {
  width: 100vw;
  font-size: 28upx;
  height: 1000upx;
  overflow: hidden;
  color: #6b8082;
  position: relative;
  background-color: #f6f6f6;
}
.content {
  width: 100%;
}

.guess-section {
	display: flex;
	flex-wrap: wrap;
	padding: 0 30upx;
	background: #fff;
	.guess-item {
		display: flex;
		flex-direction: column;
		width: 48%;
		padding-bottom: 40upx;
		&:nth-child(2n + 1) {
			margin-right: 4%;
		}
	}
	.image-wrapper {
		width: 100%;
		height: 330upx;
		border-radius: 3px;
		overflow: hidden;
		image {
			width: 100%;
			height: 100%;
			opacity: 1;
		}
	}
	.title {
		font-size: $font-lg;
		color: $font-color-dark;
		line-height: 80upx;
	}
	.price {
		font-size: $font-lg;
		color: $uni-color-primary;
		line-height: 1;
	}
}

.card {
  width: 50%;
  height: 500upx;
  float: left;
  background-color: white;
  //   margin: 0 auto 42upx auto;
  background: #ffffff;
  //   box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.1);
  //   border-radius: 5px;
  position: relative;
}

.noCard {
  width: 90%;
  height: 200upx;
  margin: auto;
  background-color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #999999;
  box-shadow: 0 0 10upx 0 rgba(0, 0, 0, 0.1);
  border-radius: 10upx;
}

.nav {
  color: white;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  font-size: 24upx;
  background-color: #fff;
  z-index: 996;
}

.searchInput999 {
  width: 90%;
  margin: 0 auto;
  background: white;
  border-radius: 30upx;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 56upx;
}

.search999 {
  width: 32upx;
  height: 32upx;
}

.searchBox999 {
  width: 56upx;
  height: 56upx;
  display: flex;
  justify-content: center;
  align-items: center;
}

.input999 {
  color: #999;
  width: 80%;
}
</style>
